<template>
	<view>
		<view v-show="isShow" class="message" :class="'color-' + type">
			{{ title }}
		</view>
	</view>
</template>

<script>
	export default {
		name:"message",
		prop: {
		},
		data() {
			return {
				isShow: false,
				type: 'success',
				duration: 2000,
				title: '操作成功'
			};
		},
		methods:{
			open() {
				this.isShow = true
				setTimeout(() => {
					this.isShow = false
				}, this.duration)
			},
			success(option){
				this.type = 'success'
				this.title = option.title
				this.duration = option.duration
				this.open()
			},
			error(option){
				this.type = 'error'
				this.title = option.title
				this.duration = option.duration
				this.open()
			},
			waring(option) {
				this.type = 'waring'
				this.title = option.title
				this.duration = option.duration
				this.open()
			},
			info(option) {
				this.type = 'info'
				this.title = option.title
				this.duration = option.duration
				this.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
.message{
	padding-top: 10rpx;
	padding-left: 30rpx;
	width: 100%;
	height: 70rpx;
	font-size: 35rpx;
	position: fixed;
	z-index: 1000;
}
.color-success{
	background-color: #e1f3d8;
	color: #67C23A;
}
.color-error{
	background-color: #fde2e2;
	color: #F56C6C;
}
.color-waring{
	background-color: #faecd8;
	color: #E6A23C;
}
.color-info{
	background-color: #F2F6FC;
	color: #909399;
}
</style>
